html{
    font-size: 5.333333vw;
}
.main{
    width: 100vw;
    height: 100vh;
    background-color: #f4f0e6;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: enter 4s linear both;
    

        a{
            font-family: "hello";
            font-size: 2rem;
            opacity: 0;
            animation: font-op 2s 4s linear both;
        }
    
    
}
@font-face{
    font-family: "hello";
    src: url(../font/AxureHandwriting-Bold.otf);
}
@keyframes font-op{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes enter{
    from{
        background-color: #9dd3a8;
    }
    25%{
        background-color: #d9d9f3 ;
        border-radius: 60%;
        transform: rotateZ(180deg) scale(0.9);
    }
    50%{
        background-color: #ceefe4;
        border-radius: 0rem;
        transform: scale(1) rotateZ(360deg);
    }
    75%{
        background-color: #f4f0e6;
        border-radius: 4rem;
        transform: rotateZ(180deg) scale(0.8);
    }
    to{
        background-color: #9dd3a8;
        border-radius: 0rem;
        transform: scale(1);
    }
}